<template>
    <div>
      <video ref="videoPlayer" controls width="800" height="500"></video>
    </div>
  </template>
   
  <script>
  import Hls from 'hls.js';
   
  export default {
    name: 'HlsPlayer',
    props: {
      src: {
        type: String,
        required: true,
      },
    },
    mounted() {
      this.initPlayer();
    },
    beforeUnmount() {
      if (this.hls) {
        this.hls.destroy();
      }
    },
    methods: {
      initPlayer() {
        if (Hls.isSupported()) {
          const video = this.$refs.videoPlayer;
          this.hls = new Hls();
          this.hls.loadSource(this.src);
          this.hls.attachMedia(video);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play();
          });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = this.src;
          video.addEventListener('loadedmetadata', () => {
            video.play();
          });
        }
      },
    },
  };
  </script>